<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	  *{padding: 0;margin:0;font-size: 0;}
	  canvas{
	    background:#A0EBF1;
	  }
	</style>
	<body>
	  <canvas id="canvas" width="500" height="500" ></canvas>
	  
	  <script>
	    window.onload=function(){
	      
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
  	    window.onresize = function(){
  	      canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
  	    }
  	    
  	    
  	    let cg = canvas.getContext("2d");
  	    let img = new Image();
  	    img.src ="fish.png";//55*37
  	    let w =55,h=37,i=0,frameCounter=0,x=[],y=[],speed=[],paruse=true;
  	    canvas.onclick = function(){
  	      paruse = !paruse;
  	    }
  	    for(let j = 0;j<100;j++){
  	      y.push(Math.random()*canvas.height|0);
  	      x.push(Math.random()*canvas.width|0);
  	      speed.push(Math.random()*2+1);
  	    }
  	    img.onload=function(){
  	      function next(){
  	        if(paruse){
    	        canvas.width = canvas.width;//清空
    	        if(frameCounter%8==0){//让动画慢下来
    	            i++
                  i%=4
                }
    	        for(let j = 0;j<y.length;j++){
    	          if(x>=canvas.width)x=0;
    	          cg. drawImage(img,0,h*i,w,h,x[j]+=speed[j],y[j],w,h);
    	          if(x[j]>canvas.width)x[j]=0;
    	        }
    	        frameCounter++
  	        }
  	        requestAnimationFrame(next);
  	      }
  	     next()
  	    }
	    }
	  </script>
	</body>
</html>
